<!--排班-->
<template>
    <div v-model="currentValue">
        <div class="panel panel-default panel-search">
            <el-form :inline="true">
                <el-form-item label="班次编码" prop="code">
                    <el-input v-model="page.query.param.code" clearable></el-input>
                </el-form-item>
                <el-form-item label="班次名称" prop="name">
                    <el-input v-model="page.query.param.name" clearable></el-input>
                </el-form-item>

                <!--<el-form-item label="类型" prop="type">-->
                <!--<el-select :clearable="true" v-model="page.query.param.type" style="width:100px">-->
                <!--<el-option v-for="item in $dongxwDict.store.SUPPLY_TYPES" :key="item[0]" :value="item[0]"-->
                <!--:label="item[1]"></el-option>-->
                <!--</el-select>-->
                <!--</el-form-item>-->

                <el-form-item>
                    <el-button type="primary" @click="search" v-keycode="'ENTER'"
                    >查询
                    </el-button
                    >
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
        <v-toolbar title="班次" type="alert">
            <!--<el-button plain @click="confirmFindClick">确定</el-button>-->
            <el-button type="primary" plain @click="cancelFind">关闭</el-button>
        </v-toolbar>

        <v-table
            ref="table"
            :page="page"
            :pageSize="12"
            :table-minheight="122"
            @dataloaded="onDataloaded"
        >
            <!--<el-table-column prop='departmentId' :sortable='true' label='部门标识' width='120'>-->
            <!--<template slot-scope='{row}'><span style='color:black'>-->
            <!--{{row.departmentId}}</span>-->
            <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column
                prop="classType"
                :sortable="true"
                label="班次类型"
                width="111"
            >
                <template slot-scope="{ row }">
                    {{ DICT.CLASSTYPE[row.classType] }}
                </template>
            </el-table-column>
            <el-table-column
                prop="code"
                :sortable="true"
                label="班次编码"
                width="120"
            >
                <template slot-scope="{ row }"
                ><span style="color: black"> {{ row.code }}</span>
                </template>
            </el-table-column>

            <el-table-column
                prop="name"
                :sortable="true"
                label="班次名称"
                width="160"
            >
                <!--<template slot-scope='{row}'>-->
                <!--<span style='color:black'> {{row.name}}</span>-->
                <!--</template>-->
                <template slot-scope="{ row }">
                    <el-button :style="'width:100%'" @click="confirmFind(row)">
                        <span style="color: darkmagenta">{{ row.name }}</span>
                    </el-button>
                </template>
            </el-table-column>

            <el-table-column
                prop="status"
                :sortable="true"
                label="启用状态"
                width="100"
            >
                <template slot-scope="{ row }"> {{ DICT.STATUS[row.status] }}</template>
            </el-table-column>
            <!---->
            <!--<el-table-column prop='updatedAt' :sortable='true' label='修改时间' width='120'>-->
            <!--<template slot-scope='{row}'><span style='color:black'>-->
            <!--{{row.updatedAt}}</span>-->
            <!--</template>-->
            <!--</el-table-column>-->
            <!--<el-table-column prop='updatedBy' :sortable='true' label='最后修改人' width='100'>-->
            <!--<template slot-scope='{row}'>-->
            <!--<span style='color:black'>		   {{row.updatedBy}}</span>-->
            <!--</template>-->
            <!--</el-table-column>-->

            <!--<el-table-column width='80' label='操作' >-->
            <!--<template slot-scope='scope'>-->
            <!--<el-button type='text' title='编辑'@click='edit(scope.row)'>-->
            <!--<i class='el-icon-edit'></i>-->
            <!--</el-button>-->
            <!--<el-button type='text' @click='del(scope.row,scope.$index)' title='删除' >-->
            <!--<span style='color: red'> <i class='el-icon-delete red'></i></span>-->
            <!--</el-button>-->
            <!--</template>-->
            <!--</el-table-column>-->
        </v-table>
    </div>
</template>
<style rel="stylesheet/less" scoped lang="less">
.status_green {
    color: red;
}
</style>

<script>
export default {
    components: {},
    props: {
        value: {
            required: true,
        },
        classNumber: {
            required: true,
        },
        confirmFind: {
            Type: Function,
            required: true,
        },
        cancelFind: {
            Type: Function,
            required: true,
        },
    },
    data() {
        return {
            DICT: {
                CLASSTYPE: {
                    10: "正常班",
                    20: "加班",
                    30: "休息班",
                },
                STATUS: {
                    10: "草稿",
                    20: "启用",
                    30: "禁用",
                },
            },

            formStatus: 1,
            orderDateRange: [],
            summaryMap: {},
            page: {
                query: {
                    orderBys: "code|asc",
                    param: {
                        status: 20,
                        isDeleted: false,
                    },
                },
                getData: this.$api.attend.attend.ClassMasterService.query,
            },
            tableActions: [
                {
                    name: "编辑",
                    handle: this.edit,
                },
                {
                    name: "删除",
                    handle: this.del,
                    style: "color:red",
                },
            ],
        };
    },
    computed: {
        currentValue: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit("input", val);
            },
        },
    },
    methods: {
        confirmFindClick() {
            if (this.confirmFind) {
                this.confirmFind();
            }
        },
        cancelFindClick() {
            if (this.cancelFind) {
                this.cancelFind();
            }
        },

        onDataloaded(rsp) {
        },
        /*
                导出
                 */
        exportRecords() {
            let params = this.getSearchParams();
            this.$api.attend.ClassMasterService.export(params);
        },
        getSearchParams() {
            this.page.query.dateRanges = {};
            if (
                this.dateRangeType != null &&
                this.dateRange &&
                this.dateRange.length > 0
            ) {
                this.page.query.dateRanges[this.dateRangeType] = {
                    startDate: this.dateRange[0],
                    endDate: this.dateRange.length > 1 ? this.dateRange[1] : null,
                };
            }
            return this.page.query;
        },
        create() {
            this.$refs.formDiag.show();
        },
        edit(row) {
            this.$refs.formDiag.show({id: row.id});
        },
        toggleStatus(row) {
        },
        del(row) {
        },
        onFormSaved() {
            this.$refs.formDiag.hide();
            this.$nextTick(this.search);
        },
        init(options = {}) {
            this.search();
        },
        search() {
            this.$refs.table.load();
        },
        cancel() {
            this.dateRange = [];
            this.page.query.param = {};
            this.search();
        },
    },
    created() {
    },
    mounted() {
        this.$on("init", this.init);
    },
};
</script>
